<template>
  <div class="styleSetting">
    <input type="hidden" :value="styleInfo" />
    <div v-if="isSize">
      <a-input class="color-slt fonts" :type="'color'" v-model="styleInfo.color" />
      <a-select class="size-slt fonts" v-model="styleInfo.fontSize">
        <a-select-option value="15">15</a-select-option>
        <a-select-option value="16">16</a-select-option>
        <a-select-option value="17">17</a-select-option>
        <a-select-option value="18">18</a-select-option>
      </a-select>
      <a-radio-group class="weight-slt fonts" v-model="styleInfo.fontWeight">
        <a-radio-button class="r-item" value="bold"><i class="font-icon bold" :class="styleInfo.fontWeight === 'bold' ? 'active' :''"></i></a-radio-button>
        <a-radio-button class="r-item" value="normal"><i class="font-icon normal" :class="styleInfo.fontWeight === 'normal' ? 'active' :''"></i></a-radio-button>
      </a-radio-group>
    </div>
    <div v-else>
      <a-input class="color-slt fonts" :type="'color'" v-model="styleInfo.color" />
      <a-radio-group class="weight-slt fonts" v-model="styleInfo.radius">
        <a-radio-button class="r-item" :value="false">直角</a-radio-button>
        <a-radio-button class="r-item" :value="true">圆角</a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script>
  export default {
    name: "styleSetting",
    props: {
      value: Object,
      isSize: {
        type: Boolean,
        default: true   // true 表示文字样式  false  表示底框样式
      }
    },
    watch: {
      value: {
        handler: function() {
          this.styleInfo = this.setData(this.value);
        },
        deep: true
      },
      styleInfo: {
        handler: function() {
          this.$emit('input', this.styleInfo);
        },
        deep: true
      },
    },
    data() {
      return {
        styleInfo: this.setData(this.value)
      }
    },
    mounted() {
      this.$emit('input', this.styleInfo);
    },
    methods: {
      setData(param) {
        if (!param || Object.keys(param).length) {
          return param;
        } else {
          if (this.isSize) {
            return {
              color: '#333333',
              fontSize: '16',
              fontWeight: 'normal'
            };
          } else {
            return {
              color: '#333333',
              radius: true
            };
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
.styleSetting{
  height: 36px;
  .fonts{
    width: 80px;
    height: 36px;
    line-height: 36px;
    float: left;
    margin-right: 5px;
    /deep/ .ant-select-selection--single{
      height: 36px;
      line-height: 36px;
    }
  }
  .color-slt{
    padding: 0;
  }
  .weight-slt{
    width: 125px;
  }
  .r-item{
    height: 36px;
    line-height: 36px;
    width: 62px;
    position: relative;
    .font-icon{
      display: block;
      width: 28px;
      height: 28px;
      background-size: 100%;
      position: absolute;
      top: 3px;
    }
    .bold{
      background-image: url("");
      &.active{
        background-image: url("");
      }
    }
    .normal{
      background-image: url("");
      &.active{
        background-image: url("");
      }
    }
  }
  &::after{
    display: inline-block;
    content: '';
    clear: both;
  }
}
</style>
